<script type="text/javascript" src="{$base_dir}js/AJAX_Prescription.js"></script>

{literal}
<style type="text/css">
	strong {
		color: red;
	}
</style>

<script type="text/javascript">

	$(document).ready(function(){
		var prescriptionId = $('#prescriptionSelect').val();
        
		if (prescriptionId > 0) {	            	        
		    loadPrescription($('#prescriptionSelect').val());
		} else {
			getNewForm('prescription', 'addPrescriptionTable');
		}
                        
        $("#printBtn").bind('click', function() {            
            if (prescriptionId > 0) {
            	   printPres(prescriptionId, $("input[name=langCheck]:checked").val());
            }
        });

		$('#presTemplateBtn').click(function() {
			showTemplate()
		});
		
        // Register Autocomplete for doctor name
		var doctorAC = $('#doctorName').autocomplete('../Employee/GetDoctorAutoCompleteAjax?set_ajax_view');
		doctorAC.setOptions({
            width: 			195,
            minChars:		2,
            formatItem:		formatMatch                                                                                                             
        });	

		// Fill data for doctor name autocomplete result
		$('#doctorName').result(function(event, data, formatted) {
			$(this).val(data[0]);
			$('#doctorId').val(data[2]);	
		});		

        									
	});

	// Format data result for service code autocomplete
	function formatMatch(item) {		
		return item[0] + '<br /><i>' + item[1] + '</i>';
	}
{/literal}
</script>

<div>
	<span id='error_addPrescription'></span>
</div>
<div id='addPrescriptionDiv'>
	<span id='statusMessage' style='color: red; line-height: 20px;'></span>
	<form id='prescriptionForm'>
		<div class='field-label' style='width: 140px; height: 35px; line-height: 35px;'>{translate}Treatment doctor{/translate}(*)</div>
	    <div class='field-label' style='width: 290px; height: 35px; line-height: 35px;'>
	    	<input id="doctorId" type="hidden" name="prescription[doctor_id]" value="">
	    	<input id="doctorName" name="doctorName" type="text" value="" style="width: 250px;" onkeyup="return moveNext(event, 'diagnosis')">
	    	&nbsp;              					
	    </div>    
	    <div class='field-label' style='width: 250px; float: right; text-align: right; height: 35px; line-height: 35px;'>
			<select id="prescriptionSelect" style="width: 230px;" disabled="disabled">         		
         		{foreach from=$prescriptionList item=row}
            	<option value="{$row.prescription_id}">{$row.date_formatted} - {$row.doctor_name}</option>              
         		{/foreach}        
         	</select>&nbsp;
	    </div>            
	    <div style="clear: both;"></div>
        
        <!-- Text diagnosis -->
		<div class='field-label' style='width: 140px; height: 35px; line-height: 35px;'>{translate}Diagnosis{/translate}</div>
		<div class="field-label" style="width: 290px; height: 35px; line-height: 35px;">
		    <input type="text" style="width: 250px;" id="diagnosis" name="prescription[diagnosis]" value="" onkeyup="return moveNext(event, '0_medicine_name_input')" />&nbsp;
		</div>
        <!-- Prescription Template Button -->
		<div class='field-label' style='width: 250px; float: right; text-align: right; height: 35px; line-height: 35px;'>
			<input type="button" id="presTemplateBtn" style='width: 230px' value="{translate}Get template{/translate}"></input>&nbsp;
		</div> 
        <div style="clear: both;"></div>                             
                
        <br>    	                       
		<input type='hidden' id='prescription_id' name="prescription[prescription_id]" value="">
        <input type='hidden' id='record_id' name="prescription[medical_record_id]" value='{$recordId}'>
		<table id='addPrescriptionTable' cellspacing=0 cellpadding=0 class='grid' style='width: 100%; -moz-box-shadow: 0 0 3px #AAA; -webkit-box-shadow: 0 0 3px #AAA;'>		
			<thead>
				<tr>
				<th style='width: 190px; font-size: 10px;'>{translate}Medicine name{/translate}</th>
                <th style='width: 180px; font-size: 10px;'>{translate}Usage{/translate}</th>
                <th style='width: 150px; font-size: 10px;'>{translate}Dosage(/time){/translate}</th>
                <th style='width: 65px; font-size: 10px;'>{translate}Time{/translate}</th>
                <th style='width: 90px; font-size: 10px;'>{translate}Quantity{/translate}</th>
                <th style='font-size: 10px;'>{translate}Description{/translate}</th>
				</tr>
			</thead>
			<tbody>		
			</tbody>
		</table>		
	</form>
	
	<div style='margin-top: 15px; text-align: right;'>
        <span id="successMessage" style="font-style: italic; color: #54BF04; padding-left: 20px"></span>
        <input type="radio" id="vnCheck" name="langCheck" checked="checked" value="vi_VN">
        <label for="vnCheck">Vn</label>
        <input type="radio" id="enCheck" name="langCheck" value="en_US">
        <label for="vnCheck">En</label>&nbsp;
        <button id="saveAndPrintBtn" onclick="javascript:savePrescription(1)">{translate}Save and print{/translate}</button>&nbsp;
        <button id="saveBtn" onclick="javascript:savePrescription(0)">{translate}Save{/translate}</button>&nbsp;
        <button id="printBtn">{translate}Print{/translate}</button>&nbsp;
        <!-- 
        <button id="newBtn" onclick="javascript:getNewForm('prescription', 'addPrescriptionTable')">{translate}New{/translate}</button>&nbsp;         
        <button id="deleteBtn" onclick="javascript:deletePrescription()">{translate}Delete{/translate}</button>
        -->
        <input type='hidden' id='importAction' name='no'>
    </div>	
</div>

<div id="recommendationDialog" style="display:none;" title="{translate}ADVICES{/translate}">							
	<div id='recommendationContent'>		
		<table class="details">		
		{foreach item=note from=$noteList name=noteLoop}
			{if ($smarty.foreach.noteLoop.iteration%3 == 1)}
			<tr>
			{/if}
				<td><input id='{$smarty.foreach.noteLoop.iteration}' type='checkbox' /></td>
				<td><label id='label_{$smarty.foreach.noteLoop.iteration}' for='{$smarty.foreach.noteLoop.iteration}'>{$note.note}</label></td>
			{if ($smarty.foreach.noteLoop.iteration%3 == 0)}
			</tr>
			{/if}
		{/foreach}
		</table>
	</div>	
</div>

<!-- Table for list of templates -->
<div id='prescriptionTemplate' style="display: none;" title="{translate}Select prescription template{/translate}">
	<table id='templateListTbl' cellspacing=0 cellpadding=0 class='grid' style='width: 100%'>
		<thead>
			<tr>
				<th style='width: 30%'>{translate}Prescription template name{/translate}</th>
				<th style='width: 40%'>{translate}Description{/translate}</th>
				<th style='width: 15%'>{translate}Created date{/translate}</th>
				<th style='width: 15%'>{translate}Last modified{/translate}</th>
			</tr>
		</thead>
		<tbody>
			{if $templates eq false} 
				<tr><td colspan="4">{translate}There is not any templates{/translate}</td></tr>
			{else}
				{foreach from=$templates item=item}
					<tr>
						<td><a href="javascript:importTemplate({$item.template_id})">{$item.template_name}</a></td>
						<td>{$item.note}</td>
						<td>{$item.date}</td>
						<td>{$item.modified}</td>
					</tr>
				{/foreach} 				
			{/if}
		</tbody>
	</table>
</div>